<template>
	<div>
		<el-card class="!border-none pt-4" shadow="never">
			<el-form class="ls-form el-set-form" :model="formData" inline>
				<el-form-item label="标题">
					<el-input class="w-[240px]" placeholder="请输入" v-model="formData.title" clearable />
				</el-form-item>
				<el-form-item>
					<el-button class="main-color1 w-[76px] h-[36px]">重置</el-button>
					<el-button class="w-[76px] h-[36px]" color="#0054A6" type="primary">查询</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<div class="text-right">
				<el-button class="w-[76px] h-[36px]" color="#0054A6" type="primary" @click="addShow=true">添加</el-button>
			</div>
			<el-table class="mt-[20px]" size="large" :data="lists"
				:header-cell-style="{'background':'#0054A6','color':'#FFB400','line-height':'52px','padding':'14px 0'}"
				:cell-style="{'color':'#0054A6','padding':'20px 0'}">
				<el-table-column label="部门名称" prop="scene_name" align="center">
					<template #default="{ row }">
						<el-button type="primary" link>
							<router-link :to="{
					                path: getRoutePath('message.message/detail'),
					                query: {
					                    id: row.id
					                }
					            }">
								<span class="main-color">部门名称</span>
							</router-link>
						</el-button>
					</template>
				</el-table-column>
				<el-table-column label="创建时间" prop="2023-09-05 11:30:32" align="center" />
				<el-table-column label="部门名称" prop="scene_name" align="center">
					<template #default="{ row }">
						<el-switch v-model="value" class="ml-2"
							style="--el-switch-on-color:#0256A7; --el-switch-off-color: #CED1D6" />
					</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right" align="center">
					<template #default="{ row }">
						<el-button type="primary" link @click="addShow=true">
							<span class="main-color1">添加</span>
						</el-button>
						<el-button type="primary" link @click="addTypeTitle='编辑',addShow=true">
							<span class="main-color1">编辑</span>
						</el-button>
						<el-button type="primary" link @click="handleDelete(row.id)">
							<span class="main-color1">删除</span>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="p-[20px] v-flex v-row-right">
				<el-pagination background layout="prev, pager, next" :default-page-size="6" :total="1000"
					:pager-count="6" />
			</div>
		</el-card>
		<!-- 添加 -->
		<el-dialog v-model="addShow" :title="addTypeTitle" width="20%">
			<div class="mt-[30px] main-color v-flex">
				<span class="mr-[10px]">上级部门：</span>
				<el-select placeholder="请选择" class="flex-1">
					<el-option v-for="item in options" :key="item.value" :label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
			</div>
			<div class="mt-[30px] main-color v-flex">
				<span class="mr-[10px]">部门名称：</span>
				<el-input class="flex-1" placeholder="请输入" clearable />
			</div>
			<div class="text-center mt-[20px] pb-[10px]">
				<el-button class="w-[100px] h-[36px]" color="#0054A6" type="primary">确认</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
	import { getRoutePath } from '@/router'
	import feedback from '@/utils/feedback'
	const formData = reactive({
		title: '',//订单编号
	})
	const lists = ref<Array<any>>([
		{}, {}, {}
	])
	const handleDelete = async (id : number) => {
		await feedback.confirm('确定要删除该信息吗？')
		// await menuDelete({ id })
		// getLists()
	}
	const value = ref(false)
	const addShow = ref(false)
	const addTypeTitle = ref('添加')
	const options = ref<Array<any>>([
		{
			value: '1',
			label: '顶级部门'
		}
	])
</script>

<style scoped lang="scss">
	:deep() .el-pagination.is-background .el-pager li.is-active {
		background-color: var(--el-text-color-main);
	}
	:deep() .el-dialog__title{
		color: var(--el-text-color-main);
	}
</style>